<template>
  <div class="home">
    <div class="login-box">
      <div class="logo-title">
        <template v-if="logo_type=='1'">
          <img :src="img" class="logo">
        </template>
        <template v-else>
          {{title}}
        </template>
      </div>
      <div class="login-input">
        <el-form :model="form" :rules="rules" ref="form" label-position="left" label-width="0px" class="card-box loginform">
          <el-form-item prop="username">
            <el-input type="text" v-model="form.username" auto-complete="off" placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" auto-complete="off" @keyup.enter.native="handleSubmit" placeholder="密码"></el-input>
          </el-form-item>
          <el-button type="text" style="margin-left:20px;float: right;padding-top: 0px;" @click="forgetPassword()">忘记密码？</el-button>
          <el-form-item style="width:100%;clear:both;">
            <div class="my-captcha" v-show="captchaShow">
              <dx-captcha ref="captchaCode" :serverKey="form.username" @success="successMethod"></dx-captcha>
            </div>
            <el-button type="primary" style="width:100%;" v-loading="loading" @click.native.prevent="handleSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="dx-version">Dx framework created by shiwj</div>
  </div>
</template>

<script>
  import http from '../../../../assets/js/http'
  import DxCaptcha from '../../../Common/ui/dx-captcha'
  export default {
    components : {
      DxCaptcha
    },
    data() {
      return {
        title: '',
        logo_type : '',
        img : '',
        loading: false,
        captchaShow : false,
        form: {
          username: '',
          password: '',
          // verifyCode: ''
        },
        requireVerify: false,
        verifyUrl: '',
        verifyImg: window.HOST + 'admin/base/getVerify',
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          // verifyCode: [
          //   { required: false, message: '请输入验证码', trigger: 'blur' }
          // ]
        },
        checked: false
      }
    },
    methods: {
      successMethod(validateCode){
          this.captchaShow = false;
          this.loading = !this.loading
          let data = {}
          // if (this.requireVerify) {
          //   data.nameOrTell = this.form.username
          //   data.password = this.form.password
          // } else {
            data.nameOrTell = this.form.username;
            data.password = this.form.password;
            data.validateCode = validateCode;
          // }
          // if (this.checked) {
          //   data.isRemember = 1
          // } else {
            data.isRemember = 0
          // }
          this.apiPost('login', data).then((res) => {
              if (res.code != 200) {
                this.loading = !this.loading
                this.handleError(res)
              } else {
                // this.refreshVerify()
                // if (this.checked) {
                //   Cookies.set('rememberPwd', true, { expires: 1 })
                // }
                this.resetCommonData(res.data);
                _g.toastMsg('success', '登录成功');
                if(res.data.firstLogin){
                  this.$router.push({path: '/home/sys/change'});
                }else{
                  this.$router.push({path: '/home/uum/user/infor'})
                }

              }
            })
      },
      fetchData() {
        this.handleResize()
      },
      handleResize () {
        let home = document.querySelector('.home')
        if (home) {
          home.style.height = 0 + 'px'
          // 兼容firefox ie google
          let h = document.body.scrollHeight === 0 ? document.documentElement.scrollHeight : document.body.scrollHeight
          // 自动设置页面高度
          if (window.innerHeight <= 800) {
            home.style.height = (h + 30) + 'px'
          } else {
            home.style.height = h + 'px'
          }
        }
      },
      forgetPassword() { this.$router.push({path: '/Forget'})},   //忘记密码
      // refreshVerify() {
      //   this.verifyUrl = ''
      //   setTimeout(() => {
      //     this.verifyUrl = this.verifyImg + '?v=' + moment().unix()
      //   }, 300)
      // },
      handleSubmit() {
        if (this.loading) return

        this.$refs.form.validate((valid) => {
          if (valid) {

            this.captchaShow = true;
            this.$refs.captchaCode.refresh();
            //

          } else {
            return false
          }
        })
        
      },
      checkIsRememberPwd() {
        if (Cookies.get('rememberPwd')) {
          let data = {
            rememberKey: Lockr.get('rememberKey')
          }
          this.apiPost('admin/base/relogin', data).then((res) => {
            this.handelResponse(res, (data) => {
              this.resetCommonData(data)
            })
          })
        }
      },
      isLogin(){
        let token = Lockr.get('token');
        if(token){
          this.apiGet('/user/findCurrentUser').then((res) => {
            if(res.code==200){
              //已登录
              if(res.data.firstLogin){
                this.$router.push({path: '/home/sys/change'});
              }else{
                this.$router.push({path: '/home/uum/user/infor'})
              }
            }else{
              Lockr.rm('token')
              Lockr.rm('userInfo')
            }
          });
        }
      },
    },
    created() {
      SysSetting.then(res=>{
        if(res.logo){
            this.logo_type = '1';
        }else{
            this.logo_type = '2';
        }
        this.title = res.title;
        document.title = this.title;
        this.img = window.HOST + res.logo;
        // console.log(this.logo);
      });
      this.isLogin();
    },
    mounted() {
      // window.addEventListener('keyup', (e) => {
      //   if (e.keyCode === 13) {
      //     this.handleSubmit()
      //   }
      // });
        // 自动设置页面高度
      this.handleResize()
    },
    watch: {
      '$route': 'fetchData'
    },
    mixins: [http]
  }
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.my-captcha{
  position:absolute;
  left: -28px;
  bottom: -20px;
  padding: 10px;
  border: 1px solid #8492A6;
  background-color: #fff;
  	border-radius: 5px;
  /* display: none; */
}
.dx-version{

  position: fixed;
  bottom: 0;
  width: 220px;
  height: 30px;
  line-height: 30px;
  background:#fff;
  color: #8492A6;
  font-size: 14px;
  right: 0;
  border-top-left-radius: 10px;
  text-align: center;
}
.home{
  width:100%;
  height: 100%;
  /* background: url(../../assets/images/star.jpg) no-repeat  center center fixed; */
  background-size:cover;
}
.bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  z-index:0;
}
.logo-title{
  width:100%;
  text-align: center;
  color:#fff;
  font-size: 30px;
}
.login-box{
  position: absolute;
  width:320px;
  height: 300px;
  top:50%;
  left:50%;
  margin-top:-200px;
  margin-left:-160px;
  z-index:1;
}
.login-input{
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.6);
  margin-top:20px;
  margin-bottom: 20px;
}
.login-input .sub-title {
  font-size: 16px;
  color: #444444;
  height: 17px;
  text-align: center;
}
.verify-pos {
	position: absolute;
	right: 100px;
	top: 0px;
}
.card-box {
  padding-top : 50px;
  width: 100%;
  height: 100%;
	/* box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02); */
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	margin-bottom: 20px;
	background-color: #F9FAFC;
	/* margin: 120px auto; */
	/* width: 400px; */
  border: 1px solid #8492A6;
  padding-left : 20px;
  padding-right: 20px;
}

.login-title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}
.loginform {
	width: 100%;
  /* float: left; */
}
</style>